  //渲染用户信息
      function showUser() {
        let userstr = localStorage.getItem('USER')
        let user = JSON.parse(userstr) || []
        if (user == '') {
          return
        }
        const loginEle = document.querySelector('#header .login')
        loginEle.innerHTML = `<span>您好~${user.username}</span>`
        productNum()
      }
        // 显示购物车商品数量
function productNum(){
  const amountEle = document.querySelector('#header .amount')
  //从localStorage中拿到商品数组
  let productListStr = localStorage.getItem("XIAOMI_CART")
  let productList = JSON.parse(productListStr) || []
  let amount = productList.length
  amountEle.innerHTML = amount
}
      showUser()
      //获取id号
      function getID() {
        let str = location.href
        let idStr = str.substring(str.indexOf('?') + 1)
        let arr = idStr.split('=')
        let id = arr[1]
        return id
      }
      //连接服务器
      function webServer() {
        let id = getID()
        axios({
          url: 'http://api.yuguoxy.com/api/shop/find',
          method: 'get',
          params: {
            id
          }
        }).then(response => {
          let data = response.data
          let {
            resultCode,
            resultInfo
          } = data
          if (resultCode == 1) {
            showProduct(resultInfo)
            addcart(resultInfo)
          }
        })
      }

      //  动态渲染商品
      function showProduct(resultInfo) {
        //  渲染图片顶部小字标题
        const tip = document.querySelector('#main .tip')
        let tipStr = `<a href="../pages/index.html">首页</a>&emsp;>&emsp;${resultInfo.product}`
        tip.innerHTML = tipStr
        // 渲染商品图片
        const img = document.querySelector('#main .img img')
        img.setAttribute('src', resultInfo.picture)
        img.setAttribute('alt', resultInfo.shop)
        const smallImg = document.querySelector('#main .left ul')


        // 图片正常时用这个

        // let samllImgStr = resultInfo.list.map((item,index) => {
        //     let str 
        //    if(index == 0){
        //      str =  ` <li class="active"><img src="${item}" alt=""> </li>`
        //    }else{
        //      str =  ` <li><img src="${item}" alt=""> </li>`
        //    }
        //    return str
        // })
        let samllImgStr = resultInfo.list.map(item => {
          return ` <li><img src="${item}" alt="" data-index="img"> </li>`
        })
        smallImg.innerHTML = samllImgStr
        // 渲染商品标题
        const h1Ele = document.querySelector('#main .right h1')
        h1Ele.innerHTML = resultInfo.product
        //渲染价格
        const price = document.querySelector('#main .right .price span:nth-child(3)')
        price.innerHTML = resultInfo.price
        // 渲染商品编号
        const h2Ele = document.querySelector('#main .right h2 span:nth-child(2)')
        h2Ele.innerHTML = 26010103147 + resultInfo.id
        tab()
        show()
      }
      /* 
      鼠标移动效果
      1.小图片效果
         1.1鼠标点击小图片显示框图片切换成小图
         1.2给该小图片加上选中效果
         1.3给其他小图片取消选中效果
      2.图片显示框效果
         2.1鼠标移动到显示框，遮盖层和放大镜
         2.2遮罩层随鼠标移动而移动
         2.3放大镜将遮罩层盖住图片等比放大
         2.4移出显示框，遮罩层和放大镜隐藏
      */
      //1.小图片效果
      function tab() {
        const smallImg = document.querySelector('#main .left ul')
        const img = document.querySelector('#main .img img')
        smallImg.addEventListener('click', function (e) {
          e = e || window.event
          let target = e.target || e.srcElement
          if (target.getAttribute('data-index') == 'img') {
            const imgEles = document.querySelectorAll('#main .left ul li img')
            for (let i = 0; i < imgEles.length; i++) {
              imgEles[i].classList.remove('active')
              // imgEles[i].removeAttribute('class') //等同移出类名
            }
          }
          target.classList.add('active')
          let url = target.getAttribute('src')
          let alt = target.getAttribute('alt')
          img.setAttribute('src', url)
          img.setAttribute('alt', alt)
        })
      }

      // 2.图片显示框效果
      function show() {

        mouseover()

      }
      //鼠标移入事件
      function mouseover() {
        const box = document.querySelector('#main .img') //图片显示框
        const mask = document.querySelector('#main .mask') //遮罩层
        const glass = document.querySelector('#main .glass') //放大镜
        box.addEventListener('mouseover', function (e) {
          e = e || window.event
          let target = e.target || e.srcElement
          let url = target.getAttribute('src')
          let alt = target.getAttribute('alt')
          glass.style.display = 'block'
          glass.innerHTML = ` <img src="${url}"alt="${alt}">`
          mask.style.display = 'block'
          mousemove()
          mouseout()
        })
      }
      //鼠标移出事件
      function mouseout() {
        const mask = document.querySelector('#main .mask') //遮罩层
        const glass = document.querySelector('#main .glass') //放大镜
        const box = document.querySelector('#main .img') //图片显示框
        box.addEventListener('mouseout', function () {
          mask.style.display = 'none'
          glass.style.display = 'none'
        })
      }
       //鼠标移动事件
       function mousemove() {
        const mask = document.querySelector('#main .mask') //遮罩层
        const glass = document.querySelector('#main .glass') //放大镜
        const box = document.querySelector('#main .img') //图片显示框
        box.addEventListener('mousemove', function (e) {
          e = e || window.event
          let target = e.target || e.srcElement
          let x = e.offsetX - mask.clientWidth/2 //遮罩层自身宽度
          let y = e.offsetY - mask.clientHeight/2 //遮罩层自身高度
          // 边界判定
          if (x<0) {
            x = 0 
          }
          if(y<0){
            y = 0
          }
          if(x>parseInt(window.getComputedStyle(box).width) - mask.clientWidth){
               x =  parseInt(window.getComputedStyle(box).width) - mask.clientWidth    
          }
          if(y>parseInt(window.getComputedStyle(box).height) - mask.clientHeight){
            y = parseInt(window.getComputedStyle(box).height) - mask.clientHeight
          }
          mask.style.left = x +'px'
          mask.style.top = y +'px' 
          const img = glass.querySelector('img')
           //放大图片位移距离
          let w = glass.clientWidth * x / mask.clientWidth
          let h = glass.clientHeight * y / mask.clientHeight
          img.style.left = -w +'px'
          img.style.top = -h +'px'
        })
      }

     /**
 * 添加购物车
 *  1. 保存商品到localStorage
 *      key        value
 *      CART-LIST  [{id:1001,name:'js高级编程',price:88.98,num:1},]
 *   2. 添加相同商品，改变数量
 *       添加之前，根据id判断商品数组中是否已经存在，如果存在数量加一，否则添加新商品
 */
     function addcart(resultInfo){
       const btn = document.querySelector('.addCart')
       btn.addEventListener('click',function(){
          // 从locaStorage获取购物车商品列表
           let productListStr = localStorage.getItem('XIAOMI_CART')
           let productList = JSON.parse(productListStr) ||[]
          //  判断该商品是否存在
           let oldProduct = productList.find(item => item.id == getID() )
           if(oldProduct){
            //  存在数量加一
            oldProduct.num++
           }else{
            //  不存在在购物车里新增该商品
             let product = {
               id:resultInfo.id,
               name:resultInfo.product,
               url:resultInfo.picture,
               num:1,
               price:resultInfo.price,
               singlePrice:resultInfo.price,
               state:false,
             }
             productList.push(product)
           }
           //持久化存储购物车
           localStorage.setItem('XIAOMI_CART',JSON.stringify(productList))   
          location.href = '../pages/cart.html' 
       })
     }


      webServer()
      